import React from 'react';
import '../../static/setting/index.styl'
import {Table, message,} from 'antd';
import Loading from '../common/Loading'
import axios from 'axios'

export default class Notice extends React.Component {
  state = {
    selectedRowKeys: [],
    noticeList: [],
    read: false,
    pageSize: 10,
    pageNum: 1,
    loaded: false,
    total: 0,
    ids: 0
  };
  queryNotice = async (e) => {
    this.setState({
      loaded: false
    })
    let res = await
      axios.post('vrv-monitor-platform-web/notice/query', {
        pageSize: this.state.pageSize,
        pageNum: this.state.pageNum
      })
    if (res.data.statusCode === 200) {
      this.setState({
        selectedRowKeys: [],
        noticeList: res.data.data,
        loaded: true,
        total: res.data.total,
      })
    } else {
      message.error(res.data.message)
    }
  }

  //标记为已读
  markAsRead = async () => {
    let res = await
      axios.post('vrv-monitor-platform-web/notice/updateNoticFlag', {
        ids: this.state.ids
      })
    if (res.data.statusCode === 200) {
      this.queryNotice()
    } else {
      message.error(res.data.message);
    }
  }

  //删除
  deleteIds = async () => {
    if (!this.state.ids) {
      message.error('请至少选择一条数据!')
      return
    }
    let res = await
      axios.post('vrv-monitor-platform-web/notice/delete', {
        ids: this.state.ids
      })
    if (res.data.statusCode === 200) {
      this.queryNotice()
    } else {
      message.error(res.data.message);
    }
  }

  onChange = (page) => {
    this.setState({
      pageNum: page,
    }, () => {
      this.queryNotice();
    });
  }

  onSelectChange = (selectedRowKeys, selectedRows) => {
    this.setState({selectedRowKeys});
    let selectedIds = selectedRows.map((item) => item.id)
    this.setState({
      ids: selectedIds.toString()
    })
  }

  regx = (str) => {
    return str.replace(/<br\/>/g, " ")
  }

  componentDidMount() {
    this.queryNotice()
  }

  render() {
    const {selectedRowKeys} = this.state;
    const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange,
    };
    const columns = [{
      title: '',
      dataIndex: 'name',
      key: 'name',
      width: '100%',
      colSpan: 2,
      render: (text, record) => (
        <div className="item">
          <div className="top">
            <div className="title"><span>【新功能】视频舆情分析上线！</span>{
              record.enable === '2' ?
                <span className="read">已读</span> : ''
            }</div>
            <div className="time">{record.createTime && record.createTime.substring(0, 10)}</div>
          </div>
          <div className="bottom">{record.noticeContent.replace(/<br\/>/g, " ")}</div>
        </div>
      ),
    }];
    return (
      <div className="notice">
        <div className="toolbar">
          <span className="link" onClick={this.deleteIds}>删除</span>
          <span className="link" onClick={this.markAsRead}>标记为已读</span>
        </div>
        {
          this.state.loaded ?
            <Table rowSelection={rowSelection} columns={columns} dataSource={this.state.noticeList} rowKey="id"/>
            : <Loading/>
        }
      </div>
    );
  }
}